<template>
    <div class="container" v-loading="loading">
        <div class="statusbar clearfix">
            <div class="w25 back" @click="fnBack()">
                <img src="../../assets/icon/back@2x.png" alt="">
                <span>返回</span>
            </div>
            <div class="w50 topcenter">
                <span>投诉建议</span>
            </div>
            <div class="w25">
                <span class="topsub" @click="fnSubmit">提交</span>
            </div>
        </div>
        <div class="wrap" style="margin-top: 3.3rem;">
            <div class="content">
                <label for=""  class="label" style="width:100%;">投诉建议<span class="red">*</span></label>
                <textarea v-model="textareas" rows="8" placeholder="请输入您的投诉建议"></textarea>
            </div>
            <div class="content rows">
                <label for=""  class="label">姓名<span class="red">*</span></label>
                <el-input class='areas' placeholder="请输入姓名" v-model='names'></el-input>
            </div>
            <div class="content rows">
                <label for=""  class="label">电话<span class="red">*</span></label>
                <el-input class='areas' type='number' v-model='tels' placeholder="请输入电话号码"></el-input>
            </div>
        </div>
    </div>
</template>
<script>
import Api from "../../kites/api";
export default {
  name: "Complaint",
  data() {
    return {
    	names:'',
    	tels:'',
    	textareas:'',
    	loading:false,
    };
  },
  beforeCreate() {
	this.openIds()
	},
  mounted() {},
  methods: {
    //返回上一页
    fnBack() {
      this.$router.go(-1);
    },
    //提交投诉建议
    fnSubmit() {
    	if(this.textareas==''||this.names==''||this.tels==''){
    		this.$message({
	          message: "参数不能为空",
	          type: "warning"
	        });
	        return;
    	}
    	if(!this.$isTel(this.tels)) {
			this.$message.error('联系电话格式不正确，请输入正确的手机号!');
			this.tels = '';
			return false;
		}
    	this.loading=true
    	this.$post(Api.CreateFeedBack,{
		  "content": this.textareas,
		  "name": this.names,
		  "phone": this.tels
		}).then(res=>{
			console.log(res)
			if(res.data.success==true){
				this.$message({
					message: "提交成功",
					type: "success"
				});
				this.textareas=''
		        this.names=''
		        this.tels = ''
		        this.loading=false
			}else{
				this.loading=false
				this.$message.error(res.data.error.message);
			}
		})
    }
  }
};
</script>
<style scoped>
.wrap {
  padding-bottom: 0;
}
.wrap .content {
  margin-top: .4rem;
  min-height: 16rem;
}
.wrap .content .label {
  display: inline-block;
  width: 8.3rem;
  float: left;
  text-align: left;
  font-size: 1.3rem;
  color: #5a5959;
}
.wrap .content textarea {
  outline: none;
  border: none;
  width: 100%;
  font-size: 1.25rem;
}
.wrap .rows{
	min-height: 50px;
}
.rows .label{
	display: inline-block;
    width: 8.3rem;
    float: left;
    text-align: left;
    font-size: 1.3rem;
    color: #5a5959;
    line-height: 40px;
}
</style>


